<template>
  <div>
    <el-dialog
      title="用户信息"
      :visible.sync="dialogVisible"
      :before-close="handleClose"
      v-if="dialogVisible"
      v-dialogDrag
      width="70%"
      top="30px"
      class="action03"
    >
      <div class="kanbao-bigbox">
        <div class="righttop-search-box2">
          <el-form
            :inline="true"
            :model="param"
            label-width="100px"
            @submit.native.prevent
          >
            <el-form-item label="" label-width="10px">
              <el-input
                placeholder="请输用户名称或关键字检索"
                clearable
                v-model="param.name"
                size="small"
                style="width: 350px"
                @keyup.enter.native="onSearch"
              >
                <i slot="prefix" class="el-input__icon el-icon-search"></i>
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="small" @click="onSearch"
                >查找</el-button
              >
            </el-form-item>
            <el-form-item style="float: right">
              <!-- <el-button type="text" style="color:#18BC9C;" @click="handleAdd"><i class="el-icon-plus"></i> 新增分类</el-button> -->
            </el-form-item>
          </el-form>
        </div>
        <div class="container-box">
          <el-table
            :data="tabledatas"
            border
            stripe
            ref="talbes"
            height="40vh"
            :header-cell-style="{
              background: '#cfcfcf',
              color: '#000000',
              'text-align': 'center',
            }"
            :cell-style="{ 'text-align': 'center' }"
            style="width: 100%"
            size="small"
            @selection-change="selectionChange"
            @row-click="handleRowClick"
          >
            <el-table-column
              type="selection"
              header-align="center"
              width="60"
            ></el-table-column>
            <el-table-column prop="user_name" label="姓名" width="120">
            </el-table-column>
            <el-table-column prop="dept_name" label="部门名称" width="120">
            </el-table-column>
            <el-table-column prop="user_phonenum" label="用户手机" width="100">
            </el-table-column>
            <el-table-column prop="user_position" label="职务" width="120">
            </el-table-column>
            <el-table-column prop="user_sex" label="性别" width="150">
              <template #default="scope">
                <span v-if="scope.row.user_sex == '0'">女</span>
                <span v-else-if="scope.row.user_sex == '1'">男</span>
              </template>
            </el-table-column>
            <el-table-column prop="memo" label="备注" width="150">
            </el-table-column>
            <el-table-column prop="description" label="个人描述" width="150">
            </el-table-column>
            <el-table-column prop="dept_code" label="部门编号" width="150">
            </el-table-column>
          </el-table>

          <div class="pagebox">
            <el-pagination
              @size-change="sizeChange"
              @current-change="currentChange"
              :current-page="param.pageNo"
              :page-sizes="[10, 30, 50, 100, 500]"
              :page-size="param.limit"
              layout="total, sizes, prev, pager, next, jumper"
              :total="dataTotal"
            >
            </el-pagination>
          </div>
        </div>
        <!-- <div style="float: right">
                        <el-button type="primary" style="color:#ffffff;" @click="bind"> 确定</el-button>
                    </div> -->
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleBindClick"> 确 定 </el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getlist } from '@/api/message/list'
import moment from 'moment'
export default {
  name: 'userName',
  data() {
    return {
      dialogVisible: false,
      param: {
        funId: 'system_user',
        baseSQL: '',
        warnStatus: '',
        name: '',
        offset: 0,
        pageNo: 1,
        limit: 10,
      },
      dataTotal: 0,
      tabledatas: [],
      userFromData: [],
    }
  },
  created() {},
  mounted() {
    this.getDatas()
  },
  methods: {
    handleShowUser() {
      this.dialogVisible = true
    },
    handleClose() {
      this.dialogVisible = false
    },
    onSearch() {
      this.param.pageNo = 1
      this.getDatas()
    },
    //单击选中
    handleRowClick(e) {
      this.$refs.talbes.toggleRowSelection(e)
      const _selectData = this.$refs.talbes.selection
      this.selectionChange(_selectData)
    },
    // 复选框按钮
    selectionChange(e) {
      // if (e.length == '0') {
      //   this.$message({
      //     message: '请选择一条数据',
      //     type: 'error',
      //   })
      //   this.toggleSelection(e)
      // } else {
      //   // this.deviceFromData = e
      //   // this.$emit('getcomData', this.deviceFromData)
      // }
      // this.deviceFromData = e
      // this.$emit('getuserData', this.deviceFromData)
      this.userFromData = e
    },
    handleBindClick() {
      if (this.userFromData.length == 0) {
        this.$message({
          message: '请选择一条数据',
          type: 'error',
        })
      } else {
        this.$emit('getUserData', this.userFromData)
      }
      this.dialogVisible = false
      console.log('this.userFromData', this.userFromData)
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.talbes.toggleRowSelection(row)
        })
      } else {
        this.$refs.talbes.clearSelection()
      }
    },
    indexMethod(index) {
      return (this.param.pageNo - 1) * this.param.limit + index + 1
    },
    sizeChange(val) {
      this.param.limit = val
      this.getDatas()
    },
    currentChange(val) {
      this.param.pageNo = val
      this.param.offset = (val - 1) * this.param.limit
      this.getDatas()
    },
    //获取数据
    getDatas() {
      if (this.param.warnStatus == '' && this.param.name == '') {
        this.param.baseSQL = ''
      } else {
        this.param.baseSQL = 'user_name like "%' + this.param.name + '%"'
      }
      getlist(this.param).then((res) => {
        if (res.status == '200') {
          let resdata = res.data
          this.tabledatas = resdata.rows
          this.dataTotal = resdata.total
        }
      })
    },

    dateFormat(row, column, cellValue, index) {
      var date = row[column.property]
      if (date == undefined) {
        return ''
      }
      return moment(date).format('YYYY-MM-DD HH:mm:ss')
    },
  },
}
</script>
<style>
.kanbao-bigbox .el-loading-spinner .el-loading-text {
  color: #666 !important;
}
</style>
<style scoped>
.el-main {
  padding: 0px !important;
}

.kanbao-bigbox {
  margin-top: 0px;
}
</style>
<style scoped>
.action03 {
  animation: scaleDrew 0.5s;
}

@keyframes scaleDrew {
  0% {
    transform: scale(0);
  }

  100% {
    transform: scale(1);
  }
}
.righttop-search-box2 {
  background: #f8f8f8;
  padding: 0px 20px 0px 20px;
  border-bottom: 1px solid #ececec;
  /* position: fixed; */
}

.righttop-search-box2 .el-form-item {
  margin-bottom: 0px !important;
}

.container-box2 {
  padding: 10px;
}

.pagebox {
  text-align: right;
  padding: 10px;
}
</style>
